<style lang='scss'>
	.excel-upload {
		$selected_color: #f56c6c;
		&.error .el-upload-dragger {
			border-color: $selected_color;
			.el-upload__text {
				color: $selected_color;
			}
		}
		.el-icon-upload.file_selected{
			color: #409EFF;
		}
	}
</style>
<template>
	<el-upload
	  :class="'excel-upload'+(file_error?' error':'')"
	  drag
	  action=""
	  :auto-upload="false"
	  :show-file-list="false"
	  :on-change="fileChange">
	  <i :class="'el-icon-upload'+(file_obj?' file_selected':'')"></i>
	  <div class="el-upload__text" v-if="file_error">{{file_error}}</div>
	  <div class="el-upload__text" v-else-if="file_obj"><em>{{file_obj.name}}</em></div>
	  <div class="el-upload__text" v-else>将文件拖到此处，或<em>点击上传</em></div>
	  <div class="el-upload__tip remark-text" slot="tip">只能上传excel文件<span v-if="size_limit_text">，且不超过{{size_limit_text}}</span></div>
	</el-upload>
</template>
<script>
	export default {
		props: {
			file_data: {
				default: ''
			},
			size_limit: {
				type: Number,
				default: 500
			}
		},
		data() {
			return {
				file_obj: '',
				file_error: ''
			}
		},
		computed: {
			size_limit_text() {
				var limit = this.size_limit;
				return limit ? (limit > 1024 ? limit/1024+'M' : limit+'Kb') : '';
			},
		},
		watch: {
			file_obj(val) {
				this.$emit('update:file_data', val);
			},
			file_data(val) {
				if(!val) {
					this.file_obj = '';
					this.file_error = '';
				}
			}
		},
		methods: {
			fileChange(file) {
				let file_obj = file.raw;
				let error = !file_obj?'文件为空，请重新上传':!(~file_obj.type.indexOf('sheet'))?'文件类型错误':this.size_limit&&file_obj.size>this.size_limit?'文件过大':'';
				
				if(error) {
					this.file_obj = '';
					this.$message.error(error);
					this.file_error = error;
				}else {
					this.file_obj = file_obj;
				}
			}
		}
	}
</script>